<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>sort</title>
    <link rel="stylesheet" type="text/css" href="../css/page/sort.css" />
</head>

<body>
    <div class="page" @vue:mounted="mounted">
        <div class="nav-bar">
            <span class="nav-bar-title">分类</span>
        </div>
        <div class="sort">
            <div class="scroll-view-y scroll_left pt20 flexcolumn w80 ">
                <div class="left_one  " @click="changeSide(1)">
                    <span class="left_zi">电脑</span>
                </div>
                <div class="left_one  " @click="changeSide(2)">
                    <span class="left_zi">数码</span>
                </div>
                <div class="left_one  " @click="changeSide(3)">
                    <span class="left_zi">服装</span>
                </div>
                <div class="left_one  " @click="changeSide(4)">
                    <span class="left_zi">农产品</span>
                </div>
            </div>
            <div class="scroll-view-y flex1">
                <div class="right_box ">
                    <div @click="onItemClick(item)" class=" right_item" v-for="item of data.list">
                        <img class="right_item_img " :src="proImg(item.id)" />
                        <span class="right_item_zi color_12 ">{{item.title}}</span>
                    </div>

                </div>
            </div>

        </div>


    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js'
    const APP = () => {
        createApp({
            data: {
                list: [],
                tabIndex: "",
            },
            clickMenu(obj) {

            },
            proImg(id) {
                return `http://le.6gcc.com:8069/web/image?model=pros&id=${id}&field=img&unique=1718095307000`
            },
            async getHotPros() {
                var type = 'others';
                if (this.tabIndex != "") {
                    type = this.tabIndex;
                }
                var dt = { type };
                core.log(dt);
                let res = await core.pro.lists(dt);
                core.log(res);
                this.data.list = res.data

            },
            onItemClick(obj) {
                var id = obj.id;
                if (id == '' || id == null) return;
                api.openWin({
                    name: 'sort_detail',
                    url: './sort_detail.html?id=' + id
                })
            },
            changeSide(param) {
                this.tabIndex = "a" + param;
                this.getHotPros();
            },
            mounted() {
                this.getHotPros()
            }
        }).mount()
    }

    window.apiready = () => {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>


</html>